<template>
  <div id="app">
    <div class="block">
      <el-cascader
        :options="options"
        :props="props"
        v-model="value"
      ></el-cascader>
      <el-tree :props="defaulProps" :load="loadNode" lazy show-checkbox> </el-tree>

      <el-timeline>
        <el-timeline-item
          v-for="(item, index) in dataList"
          :key="index"
          :timestamp="item.id"
          placement="top"
        >
          <el-card>
            <h4>{{ item.title }}</h4>
            <p>{{ item.content }}</p>
            <img :src="item.img" alt="" />
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    <transfer-com :titles="titles"></transfer-com>
    <div id="chat"></div>
  </div>
</template>

<script>
import axios from "../http/index";
import transferCom from "../components/transferCom.vue";
let id = 0;
export default {
  components: { transferCom },
  data() {
    return {
      titles: ["申请", "已申请"],
      dataList: [],
      opt: {
        page: 0,
        size: 2,
      },
      props: {
        lazy: true,
        lazyLoad: this.loadOptions,
        value: "value",
        label: "label",
        isLeaf: "isLeaf",
      },
      defaulProps:{
          label: 'label',
          children: 'zones',
          isLeaf: 'leaf'
      },
      options: [],
      value: [],
    };
  },
  mounted(){
  // 页面首次展示时滚动条定位底部
  this.scrollToBottom()
    // 检测浏览器路由改变页面不刷新问题,hash模式的工作原理是 hashchange事件
    // window.addEventListener('hashchange', () => {
    //   let currentPath = window.location.hash.slice(1)
    //   if (this.$route.path !== currentPath) {
    //     this.$router.push(currentPath)
    //   }
    // }, false)
  },
  updated(){
  // 在接收到新消息的时候触发方法将滚动条定位到底部
  this.scrollToBottom()
  },
  created() {
    this.getList();
    console.log(this.$root.isUpdate)
  },
  methods: {
    async getList() {
      debugger;
      let res = await axios.get("/api/list", {
        params: this.opt,
      });
      this.dataList = res.data.list;
      // console.log(res, "res");
    },
    // 实现滚动条一直在底部展示
    scrollToBottom(){
        this.$nextTick(()=>{
         let chat = this.$el.querySelector("#chat")
         chat.scrollTop = chat.scrollHeight
        })
    },
    loadOptions(node, resolve) {
      // console.log(node, resolve, "node");
      const { level } = node;
      const value = node.value ? node.value.replace(/-/g, "") : "";
      axios
        .get("/api/cascader", { params: { level, value } })
        .then((response) => {
          resolve(response);
        });
    },
    loadNode(node, resolve) {
      console.log(node,"1234");
      if(node.level===0){
        const { level } = node;
        const value = "";
        axios.get("/api/cascader", { params: { level, value } })
        .then((response) => {
          resolve(response);
        });
      }

      if (node.level > 1){
        const { level } = node;
        const value = node.data.value ? node.data.value.replace(/-/g, "") : "";
        axios.get("/api/cascader", { params: { level, value } })
        .then((response) => {
          resolve(response);
        });
      };
    },
    
  },
};
</script>

<style scoped>
#chat{
  height: 200px;
  overflow-y:auto;
}
</style>